<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <input type="text" placeholder="你好世界" v-foc:color.focus="color">
        <button @click="color = 'blue'">改变颜色</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                color: 'red'
            }
        },
        methods: {},
        // directives 自定义指令的选项
        directives: {
            // foc 为指令名称，注册的时候不需要加 v-,在标签中使用的时候需要加 v-foc
            foc: {
                // 在绑定元素的 attribute 前
                // 或事件监听器应用前调用
                created(el, binding, vnode, prevVnode) {
                    // 下面会介绍各个参数的细节
                    console.log(el, binding, vnode, prevVnode);
                    // el 就是我们指令使用的标签
                    /*
                        binding 是指令对象
                            arg：指令的属性
                            modifiers: 指令的修饰符
                            value: 指令的值
                        vnode: 是当前绑定的虚拟 DOM 对象
                        prevVnode: 是之前的虚拟 DOM 对象
                    */
                },
                // 在元素被插入到 DOM 前调用
                beforeMount(el, binding, vnode, prevVnode) { },
                // 在绑定元素的父组件
                // 及他自己的所有子节点都挂载完成后调用
                mounted(el, binding, vnode, prevVnode) {
                    if (binding.arg == 'color') {
                        el.style.color = binding.value
                    }

                    // 有 focus 修饰符
                    if (binding.modifiers.focus) {
                        el.focus()
                    }
                },
                // 绑定元素的父组件更新前调用
                beforeUpdate(el, binding, vnode, prevVnode) { },
                // 在绑定元素的父组件
                // 及他自己的所有子节点都更新后调用
                updated(el, binding, vnode, prevVnode) {
                    // 当指令中的一些值或者属性发生变化的时候会调用该函数
                    if (binding.arg == 'color') {
                        el.style.color = binding.value
                    }
                },
                // 绑定元素的父组件卸载前调用
                beforeUnmount(el, binding, vnode, prevVnode) { },
                // 绑定元素的父组件卸载后调用
                unmounted(el, binding, vnode, prevVnode) { }
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>